 <template>
    <main>
        <router-view v-transition :class="{ page: true,  pb50: showTabbar }"/>
        <transition name="van-slide-bottom" v-if="showTabbar">
            <van-tabbar v-model="active">
                <van-tabbar-item to="/" replace class="footer-img"><i class="index"></i>首页</van-tabbar-item>
                <van-tabbar-item to="/classify" replace class="footer-img"><i class="classify"></i>分类</van-tabbar-item>
                <van-tabbar-item to="/shopping" replace class="footer-img"><i class="shopping"></i>购物车</van-tabbar-item>
                <van-tabbar-item to="/personal" replace class="footer-img"><i class="personal"></i>我的</van-tabbar-item>
            </van-tabbar>
        </transition>
    </main>
</template>

<script>
    export default {
        data()
        {
            return {
                active     : 0,
                showTabbar : false
            }
        },
        watch: {
            '$route'(value)
            {
                switch (value.name)
                {
                    case 'index':
                        this.active = 0;
                        this.showTabbar = true;
                        break;

                    case 'classify':
                        this.active = 1;
                        this.showTabbar = true;
                        break;

                    case 'shopping':
                        this.active = 2;
                        this.showTabbar = true;
                        break;

                    case 'personal':
                        this.active = 3;
                        this.showTabbar = true;
                        break;

                    default:
                        this.active = 0;
                        this.showTabbar = false;
                        break;
                }
            }
        }
    }
</script>

<style lang="less">
    .pb50 {
        padding-bottom: 50px;
    }
    .van-tabbar-item__icon{
        font-size: 24px;
    }
    .van-tabbar-item__text{
        font-size: 12px;
    }
    .van-tabbar-item--active{
        color: #ea2000 !important;
    }
    .van-tabbar--fixed{
        z-index:99999 !important;
    }
    .footer-img {
        i{
            display: block;
            text-align: center;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100%;
            width: 25px;
            height: 25px;
            margin-right: auto;
            margin-left: auto;
            margin-bottom: 2px;
        }

        .index{
            background-image: url("assets/index.png");
        }
        .classify{
            background-image: url("assets/classify.png");
        }
        .shopping{
            background-image: url("assets/shopping_cart.png");
        }
        .personal{
            background-image: url("assets/personal.png");
        }
    }
    .van-tabbar-item--active .index{
        background-image: url("assets/index_hover.png") !important;
    }
    .van-tabbar-item--active .classify{
        background-image: url("assets/classify_hover.png") !important;
    }
    .van-tabbar-item--active .shopping{
        background-image: url("assets/shopping_cart_hover.png") !important;
    }
    .van-tabbar-item--active .personal{
        background-image: url("assets/personal_hover.png") !important;
    }

</style>